<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>导航</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <main>
      <div class="wrapper" id="kbWrapper"></div>
    </main>
    <script>
      // 初始化数据
      var hashA = init();
      var keys = hashA["keys"];
      var hash = hashA["hash"];

      // 生成键盘
      generateKeyboard(keys, hash);

      // 监听用户动作
      listenToUser(hash);

      // 下面是工具函数
      // 初始化数据
      function init() {
        var keys = {
          0: ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"],
          1: ["a", "s", "d", "f", "g", "h", "j", "k", "l"],
          2: ["z", "x", "c", "v", "b", "n", "m"],
          length: 3
        };
        var hash = {
          q: "qq.com",
          w: "weibo.com",
          e: "ele.me",
          r: "renren.com",
          t: "taobao.com",
          y: "youtube.com",
          u: "uc.com",
          i: "iqiyi.com",
          o: "opera.com",
          p: "paofu.cloud",
          a: "acfun.tv",
          s: "sohu.com",
          z: "zhihu.com"
        };
        var hashInLocalStorage = getFromLocalStorage("zzz");
        if (hashInLocalStorage) {
          hash = hashInLocalStorage;
        }
        return {
          keys: keys,
          hash: hash
        };
      }

      // 生成键盘
      function generateKeyboard(keys, hash) {
        for (var i = 0; i < keys.length; i++) {
          var divx = cTag("div");

          kbWrapper.appendChild(divx);

          var row = keys[i];
          for (var n = 0; n < row.length; n++) {
            var span = createSpan(row[n]);

            var button = createButton(row[n]);

            var img = createImg(hash[row[n]]);

            var kbd = cTag("kbd");
            kbd.className = "key";

            kbd.appendChild(span);
            kbd.appendChild(img);
            kbd.appendChild(button);
            divx.appendChild(kbd);
          }
        }
      }

      // 监听用户动作
      function listenToUser(hash) {
        document.onkeypress = function(oKey) {
          key = oKey.key;
          website = hash[key];
          window.open("https://" + website, "blank");
        };
      }

      // 获取localStorage中name对应的hash
      function getFromLocalStorage(name) {
        return JSON.parse(localStorage.getItem(name) || "null");
      }

      // 创建标签
      function cTag(tagName) {
        return document.createElement(tagName);
      }

      // 创建span标签
      function createSpan(textContent) {
        var span = cTag("span");
        span.textContent = textContent;
        span.className = "text";
        return span;
      }

      // 创建button标签
      function createButton(id) {
        var button = cTag("button");
        button.textContent = "edit";
        button.className = "button";
        button.id = id;
        button.onclick = function(re) {
          var button2 = re.target;
          var key = button2.id;
          var img2 = button2.previousSibling;
          x = prompt("输入一个网址");
          hash[key] = x;
          img2.src = "https://" + x + "/favicon.ico";
          img2.onerror = function(dd) {
            dd.target.src = "ico.png";
          };
          localStorage.setItem("uuu", JSON.stringify(hash));
        };
        return button;
      }

      // 创建img标签
      function createImg(domain) {
        var img = cTag("img");
        if (domain) {
          img.src = "https://" + domain + "/favicon.ico";
        } else {
          img.src = "ico.png";
        }
        img.onerror = function(dd) {
          dd.target.src = "ico.png";
        };
        return img;
      }
    </script>
  </body>
</html>
